import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  const MyApp() : super();

  @override
  State<StatefulWidget> createState() => new MyAppState();
}

class MyAppState extends State<StatefulWidget> {
  // 定义一个controller 监听文本变化
  TextEditingController _unameController = new TextEditingController();
  FocusNode focusNode1 = new FocusNode();
  FocusNode focusNode2 = new FocusNode();
  FocusScopeNode focusScopeNode;

  GlobalKey _formkey = new GlobalKey<FormState>();

  void initState() {
    // TODO: implement initState
    super.initState();
    _unameController.text = 'hello world';
    _unameController.selection = TextSelection(
        baseOffset: 2, extentOffset: _unameController.text.length);
    _unameController.addListener(() {
      print('controller: ${_unameController.text}');
    });
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new MaterialApp(
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('😆'),
        ),
        body: new Container(
          child: new Column(
            mainAxisAlignment: MainAxisAlignment.start,
            children: <Widget>[
              new Form(
                key: _formkey,
                // color: Colors.orange,
                // margin: EdgeInsets.only(left: 30, right: 30, top: 30),
                //height: 60,
                child: new Container(
                  color: Colors.orange[100],
                  margin: EdgeInsets.only(left: 30, right: 30, top: 30),
                  child: new TextFormField(
                  controller: _unameController,
                  focusNode: focusNode1, //关联focusNode
                  autofocus: true,
                  decoration: InputDecoration(
                    labelText: '请输入账号',
                    hintText: '账号',
                    prefixIcon: Icon(Icons.account_circle),
                    hintStyle: TextStyle(color: Colors.black45, fontSize: 14),
                    labelStyle: TextStyle(fontSize: 18, color: Colors.blue),
                    border: InputBorder.none // 去除下划线
                  ),
                  validator: (v) {
                    return v.trim().length > 0 ? null : '用户名不能为空';
                  },
                  // 监听文本变化
                  // onChanged: (text) {
                  //   print(text);
                  // },
                  // onSubmitted: (text) {
                  //   print('回车 $text');
                  // },
                  // onEditingComplete: () {
                  //   print('onEditingComplete');
                  // },
                ),
              ),
                ),
              new Container(
                color: Colors.orange[100],
                margin: EdgeInsets.only(
                  left: 30,
                  right: 30,
                ),
                height: 60,
                child: new TextField(
                  autofocus: true,
                  focusNode: focusNode2,
                  style: TextStyle(color: Colors.red),
                  obscureText: true,
                  textInputAction: TextInputAction.next,
                  keyboardType: TextInputType.multiline,
                  decoration: InputDecoration(
                    border: InputBorder.none,
                    labelText: '请输入密码',
                    prefixText: '密码 ',
                    prefixStyle: TextStyle(fontSize: 14),
                    prefixIcon: Icon(Icons.lock)),
                ),
              ),
              new Container(
                color: Colors.red,
                margin: EdgeInsets.only(top: 10, left: 0),
                child: new FlatButton(
                  color: Colors.blue,
                  child: new Text(
                    '移动焦点',
                    style: TextStyle(backgroundColor: Colors.orange),
                  ),
                  onPressed: () {
                    if (focusScopeNode == null) {
                      focusScopeNode = FocusScope.of(context);
                    } 
                    focusScopeNode.requestFocus(focusNode2);
                  },
                  padding: EdgeInsets.only(left: 0, right: 0),
                  shape: BeveledRectangleBorder(
                    side: BorderSide(color: Colors.red, width: 1),
                    borderRadius: BorderRadius.circular(10),
                  ),
                ),
              ),
              new FlatButton(
                onPressed: () {
                  focusNode1.unfocus();
                  focusNode2.unfocus();
                },
                child: new Text(
                  '隐藏键盘',
                  style: TextStyle(backgroundColor: Colors.orange),
                ),
                color: Colors.blue,
              ),
              new OutlineButton(
                child: new Text('登录'),
                textColor: Colors.black,
                padding: EdgeInsets.all(0),
                borderSide: BorderSide(color: Colors.black),
                onPressed: () {
                  if ((_formkey.currentState as FormState).validate()) {
                    print('通过验证');
                  } else {
                    print('不通過');
                  }
                },
              ),
              new RaisedButton(
                onPressed: () {},
                // child: new Text('哈哈哈'),
                child: new Padding(
                  padding: new EdgeInsets.fromLTRB(0.0, 10.0, 0.0, 10.0),
                  child: new Text('哈哈哈哈'),
                ),
              ),
              new SizedBox(
                width: 60,
                height: 20,
                child: RaisedButton(
                  child: new Text(
                    '哈哈哈哈',
                    style: TextStyle(backgroundColor: Colors.red),
                  ),
                  color: Colors.orange,
                  onPressed: () {},
                  
                ),
              ),
              // 使用buttonTheme padding 自定义宽度
              new ButtonTheme(
                padding: EdgeInsets.only(left: 0, right: 0,),
                height: 10,
                child: new FlatButton(
                  onPressed: () {},
                  child: new Text('哈哈哈哈哈哈'),
                  color: Colors.orange,
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}
